<!--
	
	snake对象
		snakX:X坐标
		snakeY：Y坐标
		snakeArr：存放蛇身div块的数组
		eat();吃食物方法
		add();增加蛇身方法
		clear();清楚蛇身方法
	food对象
		foodX：食物的X坐标
		foodY：食物的Y坐标
		show():显示食物样式的方法
		hide();隐藏食物样式的方法
	control对象
	    keyCode：按键code码
	    listener();事件监听方法
	
	打开游戏：
	  默认蛇身三个div块
	    蛇自动象右边运动，按下方向键蛇象指定方向运行，随机出现食物，
	    蛇迟到食物后蛇身边长。舌头碰见墙壁或者自身就结束游戏，蛇身清零
	
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{padding: 0px;margin: 0px;}
		/* 游戏区域 */
		.main{
			width: 800px;
			height: 400px;
			margin: auto;
			border: 1px blue solid;
		}
		
		/* 显示food块 */
		.food{
			width: 18px;
			height: 18px;
			margin: 1px;
			border: 1px red solid;
			background-color:blue ;
		}
		
		.block{
			width: 18px;
			height: 18px;
			margin: 1px;
			background-color:#CCCCCC ;
			float: left;
		}
		
		.snk{
			width: 18px;
			height: 18px;
			margin: 1px;
			background-color:red ;
			float: left;
		}
		
		</style>
		
		
		
	</head>
	<body onload="show();">
		<!--
			 游戏区域 800X400 
			水平为Y轴，垂直为X轴
		-->
		<div class="main" id="main">
			<!--<div class="block"></div>-->
		</div>
		
		<script type="text/javascript">
		
			alert("xxx");
			
			// 游戏开始步骤
			//初始化游戏区域,最大横纵块数40,20
			var mapArr = new Array();
			var gameMap = new GameMap(20,40,mapArr);
			gameMap.initMap();//初始化地图

			
			alert("xxx");
			
			
			// 创建蛇对象
			var snakeX = [1,1,1];
			var snakeY = [1,2,3];
			var snake = new Snake(snakeX,snakeY,gameMap);
			snake.initSnake();
			
			var t1 = setInterval("snake.move()",1000);//蛇移动
//			gameMap.mapArr[0][0].className = "snk";			
//			gameMap.mapArr[0][1].className = "snk";
//			gameMap.mapArr[0][2].className = "snk";
//			
//			gameMap.mapArr[0][3].className = "snk";			
//			gameMap.mapArr[0][4].className = "snk";
//			gameMap.mapArr[0][5].className = "snk";
//			
//			gameMap.mapArr[2][0].className = "snk";			
//			gameMap.mapArr[2][1].className = "snk";
//			gameMap.mapArr[2][2].className = "snk";
//			
//			gameMap.mapArr[1][0].className = "snk";			
//			gameMap.mapArr[1][1].className = "snk";
//			gameMap.mapArr[1][2].className = "snk";
			
			// 创建地图对象
			function GameMap(maxX,maxY,mapArr){
				this.maxX = maxX;//初始化最大x坐标
				this.maxY = maxY;//初始化最大y坐标
				this.mapArr = mapArr;//初始化mapArr
				//创建div块方法
				this.createDiv = function(objName,cssName){
					var main = document.getElementById("main");
					var blk = document.createElement(objName);
					blk.className = cssName;
					main.appendChild(blk);
					return blk;
				}
				//初始化map方法，创建二维数组，每一个单元格放入一个div
				this.initMap = function(){
//					alert(this.maxX);
					for(var i=0;i<this.maxX;i++){
						mapArr[i] = new Array();
						for(var j=0;j<this.maxY;j++){
							mapArr[i][j] = this.createDiv("div","block");
						}
					}
				}
			}
			
			//创建蛇对象
			function Snake(snakeX,snakeY,gameMap){
				this.snakeX = snakeX;//初始化蛇的x
				this.snakeY = snakeY;//初始化蛇Y
				this.gameMap = gameMap;//初始化蛇对象拥有的gameMap对象
				
				// 吃方法
				this.eat = function(){
					
				}
				
				// 增加蛇身的方法
				this.add = function(){
					
				}
				
				//清除蛇身的方法
				this.clear = function(){
					for(var i=0;i<this.snakeX.length;i++){
						gameMap.mapArr[snakeX[i],snakeY[i]] = "block";
					}
				}
				
				// 显示蛇身的方法
				this.disp = function(){
					for(var i=0;i<this.snakeX.length;i++){
						gameMap.mapArr[snakeX[i],snakeY[i]] = "snk";
					}
				}
				
				//蛇身初始化
				this.initSnake = function(){
					
					for(var i=0;i<this.snakeX.length;i++){
//						alert(this.snakeX.length)
						gameMap.mapArr[snakeX[i]][snakeY[i]].className="snk";
					}
					
				}
				
				
				// 蛇移动
				this.move = function(){
//					for(var m=0;m<gameMap.maxX;m++){
					
					gameMap.mapArr[1][m++].className="snk";
//					}
					
				}
			}
			
			// food 的对象
			function Food(foodX,foodY){
				this.foodX = foodX;
				this.foodY = foodY;
				
				// 显示食物div块的方法
				this.show = function(){
					
				}
				
				//清楚食物div块的方法
				this.hide = function(){
					
				}
			}
			
			// control 对象
			function Control(keyCode){
				// 按键码
				this.keyCode = keyCode;
				
				// 事件监听函数
				this.listener = function(){
					
				}
				
			}
		</script>
		
	</body>
</html>
